<template>
    <chart :id="id" :data="radar"/>
</template>

<script>
import Chart from '@/components/chart/chart'

export default {
    name: 'RadarChart',
    components: {Chart},
    props: {
        Indicator: {
            type: Array,
            default: () => {
                return []
            }
        },
        series: {
            type: Array,
            default: () => {
                return []
            }
        },
        id: {
            type: String,
            default: 'radar1'
        }
    },
    data() {
        return {
            radar: {}
        }
    },
    mounted() {
        this.$nextTick(() => {
            this.setRadarData()
        })
    },
    methods: {
        setRadarData() {
            const legend = []
            this.radar = {
                color: ['rgba(112, 182, 3, 1)', 'rgba(255, 169, 76, 1)', 'rgba(75, 206, 208, 1)', 'rgba(236, 128, 141, 1)', 'rgba(217, 0, 27, 1)'],
                title: {
                    text: ''
                },
                legend: {
                    data: [],
                    show: false
                },
                radar: {
                    // shape: 'circle',
                    indicator: this.Indicator,
                    name: {
                        textStyle: {color: '#000'},
                        formatter: function(value) {
                            let list = value.split('')
                            let result = ''
                            for (let i = 1; i <= list.length; i++) {
                                if (!(i % 4) && list[i] !== undefined) {
                                    result += list[i - 1] + '\n'
                                } else {
                                    result += list[i - 1]
                                }
                            }
                            return result
                        }
                    }
                    // indicator: [
                    //   {name: '书面及表达技能', max: 6500},
                    //   {name: '现代教育技能', max: 16000},
                    //   {name: '教学研究技能', max: 30000},
                    //   {name: '说课拼课技能', max: 38000},
                    //   {name: '学科教学技能', max: 52000},
                    //   {name: '教学设计功能', max: 25000},
                    //   {name: '组织和指导综合技能'}
                    // ]
                },
                series: [
                    {
                        symbol: 'none',
                        name: 'Budget vs spending',
                        type: 'radar',
                        areaStyle: {
                            normal: {
                                opacity: 0.6 // 背景透明
                            }
                        },
                        // data: [
                        //   {
                        //     value: [4200, 3000, 20000, 35000, 50000, 18000, 11000],
                        //     name: '学生1'
                        //   },
                        //   {
                        //     value: [5000, 14000, 28000, 26000, 42000, 21000, 10000],
                        //     name: '学生2'
                        //   }
                        // ]
                        data: this.series
                    }
                ]
            }
            this.series.map(item => {
                legend.push(item.name)
            })
            this.radar.legend.data = legend
        }
    }
}
</script>

